<template>
  <div class="container" :class="{'is-open': myAtsShow}">
    <div class="main-container">
      <div class="search-form">
        <div class="search-form__common">
          <!-- 常规搜索 -->
          <div>
            <el-input style="width:250px" clearable v-model="searchForm.keyword" placeholder="输入关键词或成员查询" size="small">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="blue" size="small" style="margin-left:15px;" @click="doSearch">搜索</el-button>
            <!-- <ui-button @click="searchAdvancedVisable=true" icon="icon icon-arr-down">高级搜索</ui-button> -->
            <el-button type="green" size="small" @click="pageType = 'addNew'" icon="el-icon-plus">新建项目</el-button>
          </div>
        </div>
        <transition name="el-zoom-in-top">
          <m-addNewProject v-if="pageType == 'addNew'" ref="newProject"  @toList="toList" @close="closeNewProject"></m-addNewProject>
        </transition>
        <!-- 设置按钮 -->
        <div class="table-setting" @click="doSetting('listField')">
          <i class="icon icon-setting"></i>
        </div>
      </div>
      <div class="layout-table mt-10">
        <m-dataTable v-if="pageType == 'list' || pageType == 'addNew'" ref="dataTable" @toDetail="toDetail"></m-dataTable>
        <m-detail v-if="pageType == 'detail'" ref="detail" :id="detailId" @toList="toList"></m-detail>
      </div>
    </div>
    <div class="right-side" :class="{'is-close': !myAtsShow, 'is-fixed': isFixed}">
      <div @mouseenter="showMyAts">
        <transition name="fadeInRight">
          <m-atsCount v-if="myAtsShow" @close="hideMyAts"></m-atsCount>
        </transition>
        <div class="close-title" v-show="!myAtsShow">
          <div class="mini-t"></div>
          <div class="title">
            我<br>的<br>A<br>T<br>S
          </div>
          <i class="icon icon-arr-left"></i>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div class="back-top" @click="backTop">
        <i class="icon icon-backtop"></i>
      </div>
    </div>
    

    <!-- 设置弹窗 -->
    <dialog-setting :visible.sync="dialogSettingVisable" :settingType="settingType" 
      @changeActive="changeSettingActive"></dialog-setting>
  </div>
</template>

<script>
import {Input, Checkbox, CheckboxGroup, Button} from 'element-ui'
import SearchAdvanced from './components/advancedSearch'
import Setting from './components/setting'
import DataTable from './list'
import Detail from './detail'
  export default {
    components: {
      [Input.name]: Input,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      [Button.name]: Button,
      'm-searchAdvanced': SearchAdvanced,
      'm-atsCount': () => import('@/components/common/components/myATS'), //我的ATS
      'dialog-setting': () => import('./components/setting'), //设置弹窗
      'm-dataTable': DataTable,
      'm-detail': Detail,
      'm-addNewProject': () => import('./components/addNewProject') //新增项目
    },
    data () {
      return {
        searchForm: {

        },
        pageType: 'list',
        checkList: [],
        dialogCreateProject: false, //新建项目
        settingType: '',
        dialogSettingVisable: false,
        detailId: null,
        myAtsShow: false,
        isFixed: false,
      }
    },
    created() {
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/project') == 0){
          this.initSticky()
        }
      })
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      doSearch() {

      },
      /**
       * @param {type} 设置类型 
       * @description 根据类型打开相对的弹窗界面
       */
      doSetting(type) {
        this.settingType = type
        this.dialogSettingVisable = true
      },
      changeSettingActive(val) {
        this.settingType = val
      },
      // 查看项目详情
      toDetail(id) {
        this.detailId = id
        this.pageType = 'detail'
      },
      backTop() {
        window.scroll(0,0)
      },
      toList() {
        this.pageType = 'list'
      },
      closeNewProject() {
        this.pageType = 'list'
      },
      showMyAts() {
        this.myAtsShow=true
        this.$nextTick(_ => {
          if(this.pageType == 'list' || this.pageType == 'addNew'){
            this.$refs.dataTable.initWidth()
          } else if(this.pageType == 'detail') {
            this.$refs.detail.initWidth()
          }
        })
      },
      hideMyAts() {
        this.myAtsShow=false
        this.$nextTick(_ => {
          if(this.pageType == 'list' || this.pageType == 'addNew'){
            this.$refs.dataTable.initWidth()
          } else if(this.pageType == 'detail') {
            this.$refs.detail.initWidth()
          }
        })
      },
    }
  }
</script>

<style lang="scss">
 
</style>
